<%inherit file="../_base2col.html"/>

<%def name="head_more()">
<link rel="stylesheet" type="text/css" href="/css/form.css">

</%def>

<%def name="title()">This is it</%def>

<%def name="body()">
            <div id="statusmsgbox" class="statusmsgbox" >
                <span>
                Due date for "Finanical investments2 review" changed.
                </span>
                <span id="statusboxUndo">
                <a onclick="statusBox.undoClicked(); return false;" href="">
                Undo?
                </a>
                </span>
            </div>
            <div class="corner_box statusmsgboxrc">
                <div class="corner_top"><div></div></div>
                   <div class="corner_content">
                      You successfully saved the "New Student Initiatives Idea"
                      <a onclick="statusBox.undoClicked(); return false;" href="">Undo?</a>
                   </div>
                <div class="corner_bottom"><div></div></div>
             </div>
             
             <div class="info">Info message</div>
                     <div class="success">Successful operation message</div>
                     <div class="warning">Warning message</div>
                     <div class="error-message">Error message</div>
                     <div class="validation">
                        <ul><li>First Name is Required.</li>
                            <li>Last Name is required</li></ul></div>

            <p style="padding: 4px 4px 4px 40px;background: #EFEFD7;border:1px solid #ccc;line-height:30px;">
    <a href="#">Some Link</a> that contains all images, js, and CSS.
</p>


<form action="#" method="post" enctype="multipart/form-data">
<p><strong>Bold</strong> fields are required.</p>

<!-- Section:  Personal Information -->
    <fieldset style="">
        <legend>Personal Information</legend>
        <div class="instructions">Please enter your name and address as they are listed for your debit card, credit card, or bank account.</div>
        <div class="required">
            <label for="first_name">First Name:</label>
            <input name="first_name" id="first_name" class="inputText" size="10" maxlength="100" value="" type="text">
        </div>
        <div class="required">
            <label for="last_name">Last Name:</label>
            <input name="last_name" id="last_name" class="inputText" size="10" maxlength="100" value="" type="text">
        </div>
        <div class="optional">
            <label for="address_1">Address:</label>
            <input name="address_1" id="address_1" class="inputText" size="10" maxlength="100" value="" type="text"><br/>
            <input name="address_2" id="address_2" class="inputText" size="10" maxlength="100" value="" type="text">
        </div>
        <div class="optional">
            <label for="city">City:</label>
            <input style="" name="city" id="city" class="inputText" size="10" maxlength="100" value="" type="text">
        </div>
        <div class="optional">
            <label for="state">State:</label>
            <select style="" name="state" id="state" class="selectOne">
                <option value="">Select a State/Province</option>
                <option value="">---------------</option>
                <option value="AL">AL - Alabama</option>
                <option value="AK">AK - Alaska</option>
                <option value="AZ">AZ - Arizona</option>
                <option value="AR">AR - Arkansas</option>
            </select>
        </div>
        <div class="optional">
            <label for="postal">Zip/Postal Code:</label>
            <input style="" name="postal" id="postal" class="inputText" size="10" maxlength="50" value="" type="text">
        </div>
        <div class="optional">
            <label for="country">Country:</label>
            <select name="country" id="country" class="selectOne">
                <option value="Select a Country">Select a Country</option>
                <option value="">---------------</option>
                <option value="United States" selected="selected">US - United States</option>
                <option value="Canada">CA - Canada</option>
                <option value="">---------------</option>
                <option value="Afghanistan">AF - Afghanistan</option>
                <option value="Albania">AL - Albania</option>
                <option value="etc">etc...</option>
            </select>
        </div>
    </fieldset>

        <div style="" class="instructions">
            <h4>Contact Information</h4>
            <p>Please enter your full email address, for example,<strong>name@domain.com</strong></p>
            <p>It is important that you provide a valid, working email address that you have access to as it must be verified before you can use your account.</p>
            <p>Please enter a land line number, not a mobile phone number.</p>
            <p class="last">Your phone number will not be shared or used for telemarketing. Your information is protected by our<a href="/legal/privacy_policy/" title="View our Privacy Policy">Privacy Policy</a>.</p>
        </div>
<!-- Section -->
    <fieldset style="">
        <legend style="">Contact Information</legend>

        <div style="" class="optional">
            <fieldset>
                <legend>How to Contact You?</legend>
                <label for="how_contact_phone" class="labelRadio compact"><input name="how_contact" id="how_contact_phone" class="inputRadio" value="Phone" type="radio">Phone</label>
                <label for="how_contact_email" class="labelRadio compact"><input name="how_contact" id="how_contact_email" class="inputRadio" value="Email" checked="checked" type="radio">Email</label>
            </fieldset>
        </div>
        <div class="required">
            <label for="email">Email:</label>
            <input name="email" id="email" class="inputText" size="10" maxlength="250" value="" type="text">
            <small>We will never sell or disclose your email address to anyone. Once your account is setup, you may add additional email addresses.</small>
        </div>
        <div class="required">
            <label for="confirm_email">Re-enter Email:</label>
            <input name="confirm_email" id="confirm_email" class="inputText" size="10" maxlength="250" value="" type="text"><small>Must match the email address you just entered above.</small>
        </div>
        <div class="optional">
            <label for="phone">Phone:</label>
            <input name="phone" id="phone" class="inputText" size="10" maxlength="50" value="" type="text">
        </div>
        <div style="" class="optional">
            <fieldset>
                <legend>Message Subject:</legend>
                <label for="subject_help" class="labelRadio">
                    <input name="message_subject" id="subject_help" class="inputRadio" value="Help, my brother/sister is driving me crazy!" type="radio">Help, my brother/sister is driving me crazy!
                </label>
                <label for="subject_retire" class="labelRadio">
                    <input name="message_subject" id="subject_retire" class="inputRadio" value="How can I tell my father/mother, it's time for them to retire?" type="radio">How can I tell my father/mother, it's time for them to retire?
                </label>
                <label for="subject_partner" class="labelRadio"><input name="message_subject" id="subject_partner" class="inputRadio" value="I'm exasperated with an awkward partner!" type="radio">I'm exasperated with an awkward partner!</label>
                <label for="subject_interfere" class="labelRadio"><input name="message_subject" id="subject_interfere" class="inputRadio" value="How do I stop my family members from interfering?" type="radio">How do I stop my family members from interfering?</label>
                <label for="subject_other" class="labelRadio"><input name="message_subject" id="subject_other" class="inputRadio" onclick="this.form.message_subject_other.focus()" onfocus="this.form.message_subject_other.focus()" value="" checked="checked" type="radio">
                Other:</label>
                <input name="message_subject_other" id="message_subject_other" class="inputText" value="" type="text">
            </fieldset>
        </div>
        <div style="" class="required">
            <label for="note_narrow">Your Message:</label>
            <textarea style="" name="note_narrow" id="note_narrow" class="textareaNarrow" rows="10" cols="21"></textarea>
            <small>Must be 250 characters or less.</small>
        </div>
        <div class="required wide">
            <label for="note_wide">Your Message:</label>
            <textarea name="note_wide" id="note_wide" class="inputTextareaWide" rows="10" cols="21"></textarea>
            <small style="">We'd love to get your feedback on any of the products or services we offer or on your experience with us.</small>
            </div>
        <div style="" class="optional">
            <label for="image">Image:</label><input name="image" id="image" class="inputFile" type="file">
            <label style="" for="delete_image" class="labelCheckbox"><input name="delete_image" id="delete_image" class="inputCheckbox" value="1" type="checkbox">Delete</label>
            <small>We only accept JPG files.</small>
        </div>
        <div class="required">
            <label for="availability_select">What is your current availability?</label>
            <select name="availability_select" id="availability_select" class="selectMultiple" size="3" multiple="multiple">
                <option value="Part-time">Part-time</option>
                <option style="" value="Full-time (Days)">Full-time (Days)</option>
                <option value="Full-time (Swing)">Full-time (Swing)</option>
                <option value="Full-time (Graveyard)">Full-time (Graveyard)</option>
                <option value="Weekends Only">Weekends Only</option>
            </select>
            <small>Use the<kbd>CTRL</kbd>key to select more than one.</small>
        </div>
        <div style="" class="required">
            <fieldset style="">
                <legend>Availability:</legend>
                <label style="" for="availability_checkbox_0" class="labelCheckbox">
                <input name="availability_checkbox" id="availability_checkbox_0" class="inputCheckbox" value="Part-time" type="checkbox">Part-time</label>
                <label style="" for="availability_checkbox_1" class="labelCheckbox">
                <input name="availability_checkbox" id="availability_checkbox_1" class="inputCheckbox" value="Full-time (Days)" type="checkbox">Full-time (Days)</label>
                <label style="" for="availability_checkbox_2" class="labelCheckbox">
                <input name="availability_checkbox" id="availability_checkbox_2" class="inputCheckbox" value="Full-time (Swing)" type="checkbox">Full-time (Swing)</label>
                <label style="" for="availability_checkbox_3" class="labelCheckbox">
                <input name="availability_checkbox" id="availability_checkbox_3" class="inputCheckbox" value="Full-time (Graveyard)" type="checkbox">Full-time (Graveyard)</label>
                <label style="" for="availability_checkbox_4" class="labelCheckbox">
                <input style="" name="availability_checkbox" id="availability_checkbox_4" class="inputCheckbox" value="Weekends Only" type="checkbox">Weekends Only</label>
            </fieldset>
        </div>
    </fieldset>

<!--  Section  -->
    <fieldset style="">
        <legend style="">Login Information</legend>
        <div class="notes">
            <h4>Login Information</h4>
            <p>Your username and password must both be at least 8 characters long and
            are case-sensitive. Please do not enter accented characters.</p>
            <p>We recommend that your password is not a word you can find in the dictionary,
            includes both capital and lower case letters, and contains at least one special character (1-9, !, *, _, etc.).</p>
            <p class="last">Your password will be encrypted and stored in our system. Due to the encryption, we
            <strong>cannot</strong>retrieve your password for you. If you lose or forget your password, we offer
            the ability to reset it.</p>
        </div>
        <div class="required">
            <label for="username">Username:</label>
            <input name="username" id="username" class="inputText" size="10" maxlength="20" value="" type="text">
            <small>May only contain letters, numbers, and underscore (_) and 8-20 characters long.</small>
        </div>
        <div class="required">
            <label for="password">Password:</label>
            <input name="password" id="password" class="inputPassword" size="10" maxlength="25" value="" type="password">
            <small>Must be 8-25 characters long.</small>
        </div>
        <div class="required">
            <label for="confirm_password">Please re-enter your password:</label>
            <input name="confirm_password" id="confirm_password" class="inputPassword" size="10" maxlength="25" value="" type="password">
            <small>Must match the password you entered just above.</small>
        </div>
        <div class="optional"><label for="remember" class="labelCheckbox">
            <input name="remember" id="remember" class="inputCheckbox" value="1" type="checkbox">Remember Me</label>
            <small>If you don't want to bother with having to
                login every time you visit the site, then checking "Remember Me"
                will place a unique identifier only our site can read that we'll
                use to identify you and log you in automatically each time you visit.
            </small>
        </div>
    </fieldset>


    <fieldset>
        <legend>Verification</legend>
          <input name="captcha_hash" value="1DA8842E51CE348E337F9B8A56F505C6" type="hidden">
          <input name="captcha_file" value="B3125151-1372-507C-AE09B61B5605CB09.jpg" type="hidden">
        <div class="notes">
            <h4>Verification Information</h4>
            <p class="last">Type the characters you see in this picture. This ensures that a person,
                not an automated program, is creating this account.</p>
        </div>
        <div class="required">
            <label for="captcha">Picture:</label>
            <img src="/images/captcha/B3125151-1372-507C-AE09B61B5605CB09.jpg" alt="" border="0">
        </div>
        <div class="required">
            <label for="captcha">Characters:</label>
            <input name="captcha" id="captcha" class="inputText" size="10" maxlength="25" value="" type="text">
        </div>
    </fieldset>
    <fieldset>
        <div class="submit actions">
            <div>
              <input class="inputSubmit" value="Submit" type="submit">
              <input class="inputSubmit" value="Cancel" type="submit">
            </div>
        </div>
    </fieldset>

</form>

</%def>
